<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        pre {
            font-size: 18px;
        }

        span {
            display: block;
        }

        a:link {
            background-color: red;
        }

        a:visited {
            background-color: lightpink;
        }

        a:hover {
            background-color: blue;
        }

        a:active {
            background-color: green;
        }

        a.custom:hover {
            color: white
        }

        span>p:first-child {
            border: 3px groove lightgoldenrodyellow;
        }

        b {
            display: block;
        }

        b:first-child  {
            color: red;
        }

    </style>
</head>
<div>
    <pre>
    伪类的语法：
    selector:pseudo-class {property:value;}
    CSS类也可以使用伪类：
    selector.class:pseudo-class {property:value;}
    </pre>
    <ol>
        <li>
            <h3>anchor伪类</h3>
            <div>
                <span>在CSS中链接的不同状态可以使用不同的方式显示</span>
                <span>a:link {background-color:red;}</span>
                <span>a:visited {background-color:lightpink;} </span>
                <span>a:hover {background-color:yellow;} </span>
                <span>a:active {background-color:green;} </span>
            </div>
        </li>
        <li>
            <h3>伪类可以和css类配合使用</h3>
            <span>a.custom:link{color:white}</span>
        </li>
        <li>
            <h3>:first-child伪类</h3>
            <span>
                span>p:first-child 匹配第一个p元素
            </span>
            <span>
                span:first-child u 第一个span的所有u元素
            </span>
        </li>
        <li>

        </li>
    </ol>
</div>
<div>
    <h3>示例:</h3>
    <a href="#">anchor伪类 测试链接</a>
    <a href="#" class="custom">伪类和css类配合使用</a>
    <span>
        <p>第一个p元素<i>123</i></p>
        <p>第二个p元素</p>
         
    </span>
    <b class="tt">测试程序<i>伪类</i> 语法<i>p:first-child i</i></b>
    <p class="tt">测试程序<i>伪类</i> 语法<i>p:first-child i</i></p>
     
</div>

</html>